const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');

module.exports = {
  entry: {
    'app': './src/index.js'
  },
	output: {
		filename: 'bundle.js',
		path: path.resolve(__dirname, 'dist')
	},
  //追踪到错误和警告在源代码中的原始位置
  devtool: 'inline-source-map',

  //配置告知 webpack-dev-server，在 localhost:8080 下建立服务，将 dist 目录下的文件，作为可访问文件
  devServer: {
    contentBase: path.join(__dirname, "dist"),
    compress: true,
    hot: true,
  },
  plugins: [
    //自动生成模版，引入相关js,需要在loader里配html-loader
    new HtmlWebpackPlugin({
      title: 'Output Management'
    }),
    //清除之前打包生成的文件
    new CleanWebpackPlugin(['dist']),
    new webpack.NamedModulesPlugin(),
    new webpack.HotModuleReplacementPlugin(),
    //为引一个能够删除未引用代码(dead code)的压缩工具(minifier) - UglifyJSPlugin
    new UglifyJSPlugin()
  ],
	module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader'
        ]
      },
      {
        test: /\.(png|svg|jpg|gif)$/,
        use: [
          'file-loader'
        ]
      },
      {
        test: /\.html$/,
        loader: 'html-loader'
      },
      {
        test: /\.(woff|woff2|eot|ttf|otf)$/,
        use: [
          'file-loader'
        ]
      },
      {
        test: /\.(csv|tsv)$/,
        use: [
          'csv-loader'
        ]
      },
      {
        test: /\.xml$/,
        use: [
          'xml-loader'
        ]
      }
    ]
  }
}